<template>
  <div class="app-container">
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      tooltip-effect="dark"
      style="width: 100%"
      height="690px"
    >
      <el-table-column type="index" label="排序" align="center" width="55" />
      <!-- <el-table-column prop="name" label="图标" align="center">
        <template slot-scope="{row}">
          <img class="icon-img" draggable="false" src="https://ossdev0.jiabala.com/sMydEtBvPqlHO"></el-image></template>
      </el-table-column> -->
      <el-table-column prop="name" label="名称" align="center" />
      <el-table-column prop="name" label="状态" align="center" />
      <el-table-column prop="name" label="操作" fixed="right" align="center">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="handleModify(row)">编辑</el-button>
          <el-button size="mini" type="warning">禁用</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row)"> 删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="getList" />
    <el-dialog
      title="新增菜单"
      :visible.sync="addMenuDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600px"
    >
      <el-form ref="menuForm" :model="menuForm" :rules="menuFormRules" label-width="60px" class="demo-modifyDataForm">
        <el-form-item label="图标" prop="name">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :http-request="handleAvatarRequest"
          >
            <img v-if="menuForm.imageUrl" :src="menuForm.imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="menuForm.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="排序" prop="name">
          <el-input v-model="menuForm.name" placeholder="请输入序号" />
        </el-form-item>
        <el-form-item label="状态" prop="name">
          <el-switch
            v-model="menuForm.open"
            :active-value="1"
            :inactive-value="2"
            active-color="#13ce66"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addMenuDialog = false">取 消</el-button>
        <el-button type="primary" @click="addMenuDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'

export default {
  name: 'CustomerChildrenMenu',
  components: { Pagination },
  data() {
    return {
      id: this.$route.query.id,
      total: 0,
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 10
      },
      tableData: [
        {
          date: '2016-05-03',
          name: '王小六',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小六',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小六',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      addMenuDialog: false,
      menuForm: {
        imageUrl: '',
        name: '',
        open: 2
      },
      menuFormRules: {

      }

    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    handleModify(row) {
      this.addMenuDialog = true
    },
    handleDelete(row) {

    },
    handleAvatarRequest(res) {
      const raw = {
        raw: res.file,
        name: res.file.name
      }
      this.uploadImgToOss(raw).then(response => {
        const imgUrl = response
        this.menuForm.imageUrl = imgUrl
      })
    },
    getList() {

    }
  }
}
</script>
<style lang="scss" scoped>
.icon-img{
  width: 100px;
  height: 100px;
}
 /deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  /deep/.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  /deep/.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 130px;
    height: 130px;
    line-height: 130px;
    text-align: center;
  }
  /deep/.avatar {
    width: 130px;
    height: 130px;
    display: block;
  }
</style>
